<template>
	<view class="app-container">
		<view class="top">
			<text class="label-txt">提现至</text>
			<u-icon name="zhifubao-circle-fill" size="40" color="#3c9cff"></u-icon>
		</view>
		<view class="center">
			<text class="label-txt">提现金额</text>
			<view class="balance">
				<text>￥</text>
				<u--input fontSize="48" type="number" border="bottom" focus v-model="money" @change="change"></u--input>
			</view>
			<text class="tip" v-if="!err">当前账户余额{{balance}}</text>
			<text class="tip error" v-else>输入金额超过账户余额</text>
		</view>
		<button :loading="loading" :disabled="disabled" :class="{disabled: !disabled}" class="btn" @click="withdrawal">提 现</button>
	</view>
</template>

<script>
	import {Withdrawal} from "@/api/user.js"
	export default {
		data() {
			return {
				money:"",
				balance: 0,
				err: false,
				loading: false
			}
		},
		computed:{
			disabled(){
				if(this.money){
					return false
				}else{
					return true
				}
			}
		},
		created() {
			this.getInfo()
		},
		methods: {
			change(){
				if(this.money > this.balance){
					this.err = true
				}else{
					this.err = false
				}
			},
			withdrawal(){
				this.loading = true
				Withdrawal({decimal:Number(this.money)}).then(res => {
					console.log(res);
					this.loading = false;
					uni.redirectTo({
						url:`./success?price=${this.money}`
					})
					this.money = null;
					this.getInfo()
				}).catch(res =>{
					this.loading = false;
				})
			},
			getInfo(){
				this.$store.dispatch('user/getInfo').then(res => {
					let { price } = res;
					this.balance = price;
				});
			},
		}
	}
</script>

<style lang="scss">
	.app-container {
		padding: 20px;

		.top {
			display: flex;
			align-items: center;

			.label-txt {
				margin-right: 40px;
			}
		}

		.center {
			margin-top: 50px;

			.label-txt {
				font-size: 15px;
				color: #8590a6;
			}

			.balance {
				margin-top: 15px;
				display: flex;
				align-items: flex-end;
				font-size: 38px;
				font-weight: bold;
				color: #000;
			}
			.tip{
				font-size: 13px;
			}
			.error{
				color: #FF3D71;
			}
		}
		.btn {
			width: 90%;
			color: #fff;
			background-image: linear-gradient(to right, #38dde5, #1891d6);
			opacity: 0.6;
			margin-top: 90px;
		}
		.disabled{
			opacity: 1;
		}
	}
</style>
